<template>
  <div class="previewIcon-box">
    <div @click.stop="lookcoverUrl(props.url)" class="hover-box">
      <i class="doorIcon">&#xe63b;</i>
    </div>
    <div @click.stop="delimg()" v-if="props.deleteIconFlag" class="hover-box">
      <i class="doorIcon">&#xe634;</i>
    </div>
  </div>

  <t-image-viewer v-model:visible="IMGvisible" :images="[urls + imageUrl]"> </t-image-viewer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { heards, url, urls } from '@/utils/request/upload';
import { MessagePlugin } from 'tdesign-vue-next';
import { upLoadFn } from '@/utils/request/upload';
import { useProjectStore } from '@/store';
import { updateProject } from '@/api/project/project';
const IMGvisible = ref(false);
const logoshow = ref(false);
const imageUrl = ref('');
const store = useProjectStore();
const props = defineProps({
  url: {
    type: String,
    default: '',
  },
  type: {
    type: Number,
    default: 1,
  },
  deleteIconFlag: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['update']);
//查看大图
const lookcoverUrl = (url: string) => {
  IMGvisible.value = true;
  imageUrl.value = url;
};
const delimg = () => {
  //   parmas.logo = '';
  //   store.setLogo(parmas.logo);
  emit('update', '');
};
const beforeUpload = (file: any) => {
  //回调钩子
  console.log(file);
  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (
    file.type !== 'image/gif' &&
    file.type !== 'image/png' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/bmp'
  ) {
    MessagePlugin.error('上传文件格式错误');
    return;
  }
  logoshow.value = true;
  upLoadFn(file, 5).then((res: any) => {
    // console.log(res);
    if (res) {
      imageUrl.value = res;

      switch (props.type) {
        case 1:
          store.setLogo(imageUrl.value);
          updateProject({ logoUrl: res }, localStorage.getItem('projectId')).then((res) => {
            MessagePlugin.success('修改成功');
          });
          break;

        default:
          break;
      }
    } else {
      MessagePlugin.error('创建成功');
    }
    logoshow.value = false;
  });
};
</script>
<style scoped lang="less">
.previewIcon-box {
  display: flex;
  // align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 24px;
  // opacity: 0;
  z-index: 66;
  // background: rgba(0, 0, 0, 0.4);

  > div {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    margin-right: 8px;
    margin-top: 6px;
  }
  .hover-box:hover {
  }
}
</style>
